<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="mini">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('sys:theme:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="my-themes">
      <div class="container">
        <ul class="theme-list">
          <template v-for="item in dataList">
            <li class="theme-item">
              <div class="thumb" :style="{backgroundImage:'url(' + item.titlePicUrl+ ')', backgroundRepeat:'no-repeat',backgroundSize: 'cover'}">
                <div class="page">
                  <!--<Page class="content" :style="{width: item.width + 'px', height: item.height + 'px', transform: 'scale(' + 230 / item.width + ',' + 328 / item.height  +')'}" :elements="item.titlePicUrl"type="see" />-->
                </div>
                <div class="cover">
                  <div class="toolbar">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                      <i @click="addOrUpdateHandle(item.id)" class="el-icon-edit"></i>
                    </el-tooltip>
                    <el-tooltip  class="item" effect="dark" content="删除" placement="top-start">
                      <i @click.stop="deleteHandle(item.id)" class="el-icon-delete"></i>
                    </el-tooltip>
                    <!--<el-tooltip  class="item" effect="dark" content="复制" placement="top-start">-->
                      <!--<i @click.stop="copy(item.id)" class="el-icon-document-->
<!--"></i>-->
                    <!--</el-tooltip>-->
                  </div>
                  <div class="preview" @click="view(item.id)"><span>预 览</span></div>
                  <el-tooltip class="item" effect="dark" content="使用该模版制作节目" placement="top">
                    <div class="preview" @click="copy(item.id)"><span>制 作</span></div>
                  </el-tooltip>
                  <div class="preview_r"><span>{{item.width}} * {{item.height}}</span></div>
                </div>
              </div>
              <div class="footer">
                <div class="title">{{item.programName}}</div>
                <!--<div class="content">{{item.description}}</div>-->
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <!--<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
  </div>
</template>

<script>
  import Page from './../../../components/Page'
  import Themeclass from './themeclass'
  // import AddOrUpdate from './theme-add-or-update'
  // import SelectSkin from './select-skin'
  export default {
    data () {
      return {
        dataForm: {
          key: '',
          cid: null
        },
        classList: [],
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },
    components: {
      Themeclass,
      Page
      // SelectSkin
      // AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      themeClass () {
        this.$refs.themeclass.init()
      },
      copy (id) {
        console.log(id)
        this.$http({
          url: this.$http.adornUrl(`/program/copy`),
          method: 'get',
          params: this.$http.adornParams({
            'id':id
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$router.push({
              name: 'programs-edit',
              params: {
                status: 'new',
                id: data.copyId
              }
            })
          }
        })
      },
      // view (id) {
      //   window.open('/#/view?type=theme&id=' + id)
      // },
      classSelectChange () {
        console.log('id', this.dataForm.cid)
        // this.dataForm.cid = id
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/program/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key,
            'type': 0
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data.page.list)
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.$router.push({
          name: 'programs-edit',
          params: {
            status: 'new',
            id: id
          }
        })
        // this.$router.push('/h5editor?type=0' + (id ? '&id=' + id : '') + (this.dataForm.cid ? '&cid=' + this.dataForm.cid : ''))
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/program/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .my-themes {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
  }

  .my-themes .container {
    width: 1024px;
    margin: 0 auto;
    padding-top: 20px;
  }

  .my-themes .theme-list {
    overflow: hidden;
  }

  .theme-item {
    width: 230px;
    height: 328px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
  }

  .theme-item .thumb .page {
    width: 100%;
    height: 328px;
  }
  .thumb {
    position: relative;
    .cover {
      display: none;
      position: absolute;
      background: #000;
      opacity: 0.5;
      width: 100%;
      height: 100%;
      top:0;
      .toolbar {
        color: #fff;
        text-align: right;
        cursor: pointer;
        padding: 10px;
        font-size: 18px;
        i {
          margin: 5px;
        }
      }
      .preview {
        text-align: center;
        margin-top:60px;
        span {
          border: 1px solid #fff;
          padding: 5px 10px;
          font-size: 20px;
          color: #fff;
          cursor: pointer;
        }
      }
      .preview_r {
        text-align: center;
        margin-top:20px;
        span {
          /*border: 1px solid #fff;*/
          padding: 5px 10px;
          font-size: 20px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .thumb:hover {
    .cover {
      display: block;
    }
  }
  .theme-item .footer {
    height: 68px;
    padding: 5px;
    margin-top: -30px;
    background-color: rgba(255, 255, 255, 0.01);
    box-sizing: border-box;
    position: absolute;
  }

  .theme-item .footer > .title {
    color: #4a4a4a;
    font-size: 15px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 22px;
    font-weight: bold;
    background: rgba(93, 101, 98, 0.3);
  }

  .theme-item .footer > .content {
    color: #83817b;
    margin-top: 12px;
    font-size: 14px;
    max-height: 40px;
    overflow: hidden;
    line-height: 1.2;
  }
  .footer .delete {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .theme-item.create {
    text-align: center;
  }

  .theme-item.create .create-area p {
    font-size: 20px;
    cursor: pointer;
    margin-top: 100px;
  }
  .content {
    transform-origin: left top;
    background-color: #fff;
    overflow: hidden;
    position: relative;
  }
</style>
